<template>
    <div class="ec-site-detail">
    
        <el-dialog
        title="电商信息"
        :visible.sync="dialogVisible"
        width="25%">
            <el-form label-width="100px"
            :rules="rules" ref="ruleForm" :model="siteForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="siteForm.name"></el-input>
                </el-form-item>
                <el-form-item label="域名" prop="domain" >
                    <el-input v-model="siteForm.domain"></el-input>
                </el-form-item>
                <el-form-item label="账期" prop="payment_term" >
                    <el-input v-model="siteForm.payment_term"></el-input>
                </el-form-item>
                <el-form-item label="财务对账" prop="no" >
                    <el-input v-model="siteForm.no"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="measure_unit" >
                    <el-select placeholder="选择单位" v-model="siteForm.measure_unit">
                        <el-option v-for="it in unitOptions" :key="it.value" :label="it.label" :value="it.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>

<script>
import sdApi from '../../api/sd';

export default {

    data() {
        return {
            dialogVisible: false,
            siteForm: {
                name: '',
                domain: '',
                measure_unit: '',
                no: '',
                payment_term: '',
                id: ''
            },
            unitOptions: [{
                value: 'imperial',
                label: '英制单位'
            }, {
                value: 'metrics',
                label: '国际单位'
            }],
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger:'blur'},
                    { min:3, max:10, message: '3-10', trigger:'blur'},
                ],
                domain: [
                    { required: true, message: '请输入域名'}
                ],
                measure_unit: [
                    { required: true, message: '选择单位'}
                ]

            },
        };
    },
    
    created() {
        
    },
    methods: {
        submitForm(formName) {
            // console.log(this.siteForm);
            this.$refs[formName].validate(valid=> {
                if(valid) {
                    //编辑
                    if (this.siteForm.id) {
                        sdApi.saveEcSite(this.siteForm.id, this.siteForm).then(()=>{
                            this.hide();
                            this.$emit('success');
                        });
                    } else { //新增
                        sdApi.createEcSite(this.siteForm).then(()=>{
                            this.hide();
                            this.$emit('success');
                        });
                    }
                    
                } else  {
                    return false;
                }
            });
        },
        show(index) {
            // console.log(index);
            if (index) {
                sdApi.ecSiteShow(index).then(res=> {
                    this.siteForm = res.data.site;
                });
            }
            this.dialogVisible = true;
        },
        hide() {
            this.dialogVisible = false;
        }
    },



};
</script>
<style>
    
</style>
